<template>
  <div class="register">
    <!-- 短信登录窗口 -->
    <form
      class="register-form"
      ref="registerForm"
      :model="registerForm"
      auto-complete="on"
      label-position="left"
    >
      <div class="tit">手机短信验证码登录</div>
      <div class="inp">
        <input
          type="text"
          prop="LoginName"
          ref="LoginName"
          v-model="registerForm.phone"
          name="username"
          maxlength="11"
          id="LoginName"
          class="inpa"
          placeholder="请输入电话号码"
        />
        <div class="flex-box">
          <input
            type="text"
            name=""
            id=""
            ref="code"
            class="inpc"
            placeholder="请输入验证码"
            v-model="registerForm.code"
            @keydown.enter="handleregister"
            maxlength="6"
          />
          <div class="code" id="checkCode" ref="yzm" @click="sendCode">
            {{content}}
          </div>
        </div>

        <div class="btn" @click="handlelogin">登录</div>
        <div class="tips" @click="login">账号密码登录</div>
      </div>
    </form>
  </div>
</template>

<script>
import { checkPhone, checkPwd } from "@/common/common.js";
import { GetSmsCode, VerifyCode,Login, GenerateCaptcha,
  VerifyCaptcha,
  ciphertext,
  ssokey, } from "@/api/api";
export default {
  name: "Codelogin",
  data() {
    return {
       content:'发送验证码',
       miao: 60,
       ssokey: "",
        sj: sessionStorage.setItem("timestamp", new Date().getTime()),
        mw: "",
        registerForm: {
        phone: '', // 电话
        password: "", //密码
        type: '2', // 登录类型，1 登录名+密码+图形验证码、2 手机号+短验码
        getDishType: "",
        imgByteArray: "", // 验证码图片
        captchaKey: "", // 图形验证码的key
        captcha: "", //图形验证码
        verifyCode: "", // 手机短信验证码
        getMenulist: "", // 企业编码 - 仅在多租户部署下需要提供
        code: "",
        codeNum: "",
       
      },
    };
  },
  mounted() {
    // checkCodeofRandom();
  },
  methods: {
    sendCodeBtn(){
      this.getCountdown()
    },
    // 账号密码登录
    login() {
      this.$router.push("/login");
    },
    // 登录
    async handlelogin() {
      if (!checkPhone(this.registerForm.phone)) {
        return;
      }
      if (this.registerForm.code == "") {
        this.$message({
          showClose: true,
          message: "请输入验证码！",
          type: "error",
        });
        return;
      } else {
        // 校验验证码
        let res = await VerifyCode({
          code: this.registerForm.code,
          phone: this.registerForm.phone,
        });
        console.log("验证code", res);
        if (res.data == 0) {
          // 显示秒数
          this.seconds();
          let userInifLogin = await Login({
            phone: this.registerForm.phone,
            type:this.registerForm.type,
            verifyCode:this.registerForm.verifyCode
          })
          console.log(userInifLogin);
          sessionStorage.setItem("LoginName", this.registerForm.LoginName);
          this.$router.push({ path: this.redirect || "/" });
          location.reload();
        } else {
          this.$message.error("验证码错误！");
          return false;
        }
      }
    },
    // 发送手机验证码
    async sendCode() {
       let timer =setInterval(() => {
         this.miao --
         if(this.miao < 60 && this.miao != 0){
            this.content.disabled = true
         }
         this.content = this.miao + "秒后重新发送";
         if (this.miao < 0) {
          
          this.miao = 60;
          this.content = "发送验证码";
          window.clearInterval(timer);
        }
      },1000)
      // if (!checkPhone(this.registerForm.phone)) {
      //   return;
      // }
      let res = await GetSmsCode({
        phone: this.registerForm.phone,
      });
      console.log("电话", res);
      if (res.data == 0) {
        this.$message({
          showClose: true,
          message: "短信已发送,请注意查收！",
          type: "success",
        });
      } else {
        this.$message.error("请勿频繁操作！");
        return false;
      }
    },

  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.register {
  width: 100%;
  height: 100%;
  background: url("../../static/天府新区/切图/登录-bg.png") no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;

  zoom: 1;
}

.register-form {
  width: 25%;
  height: 50%;
  background: rgba(37, 51, 86, 0.4);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  text-align: center;
  margin-top: 40px;
  color: rgb(117, 197, 253);
  font-size: 24px;
  overflow: hidden;
}

.inp {
  width: 80%;
  height: 70%;
  margin-top: 10px;
  margin: 50px auto;
  overflow: hidden;
}

.register {
  width: 100%;
  height: 100%;
  background: url("../../static/天府新区/切图/登录-bg.png") no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  overflow: hidden;
  zoom: 1;
}

.register-form {
  width: 25%;
  height: 50%;
  background: rgba(37, 51, 86, 0.4);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

.tit {
  color: rgb(117, 197, 253);
  margin-top: 20px;
  font-size: 20px;
}

.inp {
  width: 80%;
  height: 70%;
  margin-top: 10px;
  margin: 50px auto;
  overflow: hidden;
}

.inpa {
  height: 40px;
  width: 100%;
  display: inline-block;
  border: none;
  background: url("../../static/天府新区/切图/登录-账号.png") no-repeat;
  background-position: 3px;
  padding-left: 30px;
  background-color: rgb(50, 68, 106);
  color: #fff;
  outline: none;
}

.inpb {
  height: 40px;
  width: 100%;
  display: inline-block;
  border: none;
  margin-top: 30px;
  color: #fff;
  background: url("../../static/天府新区/切图/登录-密码.png") no-repeat;
  background-position: 3px;
  padding-left: 30px;
  background-color: rgb(50, 68, 106);
  outline: none;
}

.inpc {
  height: 40px;
  width: 60%;
  display: inline-block;
  border: none;
  margin-top: 30px;
  background: url("../../static/天府新区/切图/登录-验证码.png") no-repeat;
  background-position: 3px;
  padding-left: 30px;
  background-color: rgb(50, 68, 106);
  color: #fff;
  outline: none;
}

.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 20px auto;
  color: #fff;
  background: royalblue;
  cursor: pointer;
}

.flex-box {
  display: flex;
  justify-content: space-between;
}

.code {
  height: 40px;
  width: 35%;
  margin-top: 30px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  color: #fff;
  font-size: 0.175rem;
  background-color: rgb(50, 68, 106);
}

.tips {
  float: right;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}

.reg {
  color: #ccc;
  width: 48%;
  height: 30px;
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  cursor: pointer;
}

.clear {
  clear: both;
}
</style>
